import './index.scss'
import { Form, Radio, Upload } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { useSearchParams } from 'react-router-dom'
import 'react-quill/dist/quill.snow.css'
import { useState, useRef } from 'react'
import {server} from '@/static/server'


const UploadFile = () => {
    const [params] = useSearchParams()

    // 存放上传图片的列表
    const [fileList, setFileList] = useState([])

    // 这个函数的执行分阶段 是从updating到done的过程
    // 这个过程只要上传图片内容发生变化就会不断执行直到全部上传完毕
    // 使用useRef声明一个暂存仓库
    const cacheImgList = useRef([])
    const onUploadChange = ({ fileList }) => {
        // 同时把图片列表存入仓库一份
        // 这里关键位置:需要做数据格式化
        const formatList = fileList.map(file => {
            // 上传完毕 做数据处理
            if (file.response) {
                return {
                    url: server.url+file.response.data
                }
            }
            // 否则在上传中时，不做处理
            return file
      })
      setFileList(formatList)
      cacheImgList.current = formatList
    }

    // 切换图片
    const [imgCount, setImageCount] = useState(1)
    const radioChange = (e) => {
        // 这里要使用e.target.value做判断
        const rawValue = e.target.value
        setImageCount(rawValue)
        // 无图模式
        if (cacheImgList.current.length === 0) {
            return false
        }
        // 单图模式
        if (rawValue === 1) {
            const img = cacheImgList.current[0]
            setFileList([img])
        // 多图模式
        } else if (rawValue === 3) {
            setFileList(cacheImgList.current)
        }
    }

    return (
        <Form.Item label="封面">
            <Form.Item name="type">
            <Radio.Group onChange={radioChange}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
            </Radio.Group>
            </Form.Item>
            {imgCount > 0 && (
            <Upload
                name="file"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList
                action="/api/upload"
                fileList={fileList}
                onChange={onUploadChange}
                multiple={imgCount > 1}
                maxCount={imgCount}
            >
                <div style={{ marginTop: 8 }}>
                <PlusOutlined />
                </div>
            </Upload>
            )}
        </Form.Item>
  )
}


export default UploadFile